<template>
  <div class="recharge-page">
    <div v-if="!isDeposit">
      <div class="deposit-form">
        <div class="deposit-icon">
          <img src="@/assets/images/iconl1.png" alt="deposit" />
        </div>
        <div class="form-title">{{ t("usdt_depositAmount") }}</div>
        <van-field
          v-model="amount"
          type="number"
          :placeholder="t('recharge_amountPlaceholder')"
          class="amount-input"
        />
      </div>
      <div class="payment-channels">
        <div class="section-title">{{ t("recharge_channel") }}</div>
        <div class="channel-list">
          <div
            v-for="(channel, index) in channels"
            :key="index"
            class="channel-item"
            :class="{ active: selectedChannel === index }"
            @click="selectChannel(index)"
          >
            <div class="channel-info">
              <div class="channel-icon"></div>
              <span class="channel-name">{{ channel.name }}</span>
            </div>
            <div class="channel-select">
              <div
                class="select-circle"
                :class="{ selected: selectedChannel === index }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="deposit-warning">
        <div class="deposit-warning-icon"></div>
        <span
          >{{ t("recharge_minTip") }} COP{{
            formatNumber(channels[selectedChannel].value)
          }}</span
        >
      </div>

      <div class="deposit-button" @click="handleDeposit">
        {{ t("user-recharge") }}
      </div>
    </div>

    <div class="deposit-form" v-if="isDeposit">
      <div class="deposit-icon">
        <img src="@/assets/images/iconl1.png" alt="deposit" />
      </div>
      <div class="deposit-form-title" style="font-size: 17px">
        {{ t("recharge_orderCreated") }}
      </div>
      <div class="deposit-form-title">
        {{ t("usdt_depositAmount") }}:
        <span>COP{{ formatNumber(amount) }}</span>
      </div>
      <div class="deposit-form-title">
        {{ t("recharge_channel") }}:
        <span>{{ channels[selectedChannel].name }}</span>
      </div>
      <div class="deposit-button" @click="payDeposit">
        {{ t("user-recharge") }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { formatNumber } from "@/utils/public";
import { withdrawalTips, addRecharge } from "@/api/user";
const router = useRouter();
const amount = ref("");
const selectedChannel = ref(0);
const isDeposit = ref(false);
const inviteInfo = ref("");
const { t } = useI18n();
const amountLink = ref('')
// 定义API响应类型接口
interface ApiResponse {
  msg: string;
  code: number;
  data: any;
}

let channels = ref([{ name: "NEQUI", value: "300,000" }]);
const selectChannel = (index: number) => {
  selectedChannel.value = index;
};
onMounted(() => {
  getwithdrawalTips();
});
const getwithdrawalTips = async () => {
  try {
    const res = await withdrawalTips();
    if (res.code === 200) {
      inviteInfo.value = res.data;
      channels.value[0].value = res.data.inLow;
    } else {
      showToast(res.msg || t("user-coupon_noData"));
    }
  } catch (e) {
    showToast(t("products_networkError"));
  } finally {
  }
};

const handleDeposit = async () => {
  // 处理充值逻辑
  if (amount.value == "") {
    showToast(t("recharge_invalidAmount"));
    return;
  }
  if (selectedChannel.value == 4) {
    router.push("/static/usdt");
    return;
  }
  const result = await addRecharge({ amount: amount.value });
  const response = result as unknown as ApiResponse;
  // 处理返回
  if (response.code === 200) {
    amountLink.value = response.data
    isDeposit.value = true;
  } else {
    showToast(response.msg);
  }
};
const payDeposit = () => {
  window.open(amountLink.value);
};
</script>

<style scoped>
.recharge-page {
  min-height: 100vh;
  overflow: hidden;
  padding: 0 17px;
  font-size: 17px;
  color: #f6eade;
  background: url("../../assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
}
.deposit-form {
  margin-top: 17px;
  background: linear-gradient(
    180deg,
    rgba(254, 242, 230, 0) 4%,
    rgba(254, 237, 221, 0.1) 63%
  );
  border-radius: 18px;
  padding: 0 17px 5px;
  margin-bottom: 18px;
}
.deposit-icon {
  text-align: center;
}

.deposit-icon img {
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.deposit-form-title {
  margin-top: 5px;
  font-size: 16px;
}
.deposit-form-title span {
  font-weight: bold;
  padding-left: 5px;
}

.form-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5em;
  color: #fff;
  overflow: hidden;
  margin-bottom: 9px;
}

.amount-input {
  display: block;
  width: 100%;
  height: 57px;
  line-height: 57px;
  border-radius: 13px;
  background: #242120;
  box-sizing: border-box;
  border: 1px solid #5c5754;
  font-size: 17px;
  color: rgba(246, 234, 222, 0.4);
  padding: 0 17px;
  overflow: hidden;
  margin-bottom: 11px;
}

:deep(.amount-input .van-field__control) {
  color: #f6eade;
}

:deep(.amount-input .van-field__placeholder) {
  color: hsla(0, 0%, 100%, 0.3);
}

.payment-channels {
  margin-top: 22px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5em;
  color: #fff;
  overflow: hidden;
  margin-bottom: 9px;
  padding: 0 17px;
}

.channel-list {
  border-radius: 18px;
  background: rgba(254, 242, 230, 0.1);
  overflow: hidden;
  border: 1px solid #f6eade;
}
.channel-select {
  width: 20px;
  height: 20px;
}
.channel-item {
  overflow: hidden;
  font-size: 0;
  padding-right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-item:last-child {
  border-bottom: none;
}

.channel-info {
}
.active {
  background: linear-gradient(
    180deg,
    rgba(254, 242, 230, 0) 4%,
    rgba(254, 237, 221, 0.1) 62%
  );
}
.channel-icon {
  display: inline-block;
  vertical-align: middle;
  width: 78px;
  height: 56px;
  line-height: 56px;
  overflow: hidden;
  background-image: url("../../assets/images/iconl2.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.channel-name {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  line-height: 56px;
  text-align: justify;
  color: #f6eade;
}

.select-circle {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-image: url();
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.select-circle.selected {
  background-image: url();
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.deposit-warning {
  height: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(254, 229, 207, 0),
    rgba(223, 182, 149, 0.2) 99%
  );
  font-size: 13px;
  color: #f6eade;
  margin: 22px 0 24px;
}

.deposit-warning .deposit-warning-icon {
  display: inline-block;
  vertical-align: middle;
  width: 13px;
  height: 13px;
  margin: -1px 9px 0 0;
  background-image: url();
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.deposit-button {
  overflow: hidden;

  margin: 17px auto;
  /* width: 361px; */
  height: 50px;
  line-height: 50px;
  border-radius: 13px;
  background:
    linear-gradient(270deg, #fee5cf, #dfb695 50%, #fee5cf),
    linear-gradient(180deg, #af917f 2%, #a9836b 99%);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #0c1f26;
}
</style>
